<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    (function(){
            function Observer(){   
                this.obj = {};
                this.on = function(type,handler){ 
                    //订阅消息
                    //保存该消息类型及用来接收消息的函数
                    this.obj[type] = (this.obj[type]?this.obj[type]:[])
                    this.obj[type].push( handler ); 
                }
                //发布消息
                this.emit = function(type,msg){ 
                    if( this.obj[type] ){ 
                        this.obj[type].forEach((item)=>{
                            item(msg);
                        })
                    }
                }
            }
            window.Observer = Observer;
        })()
        //实例化对象
        var os = new Observer();
        //订阅消息
        os.on('lili',function(msg){
            //这里接收来自发布者的消息 msg
            console.log('李丽 收到了来自同桌内心深处的声音: ' + msg);
        })
        //订阅消息
        os.on('LIli',function(msg){
            //这里接收来自发布者的消息 msg
            console.log('李莉 收到了来自内心深处的声音: ' + msg);
        })
        os.on('LILI',function(msg){
            //这里接收来自发布者的消息 msg
            console.log('莉莉 收到了来自头顶的消息: ' + msg);
        })
        console.log(os);

        //发布消息
        os.emit('lili','本周直接卷死！')
        os.emit('LIli','本周天直接睡死!')
        os.emit('LILI','本周头发暂存一根，请提前预约植发服务!')
</script>